Skip to main content

Examples

Examples

Here are a few examples showcasing the usage of the Calendar Widget in different scenarios:

Basic Calendar Widget​

August

Sun
Mon
Tue
Wed
Thu
Fri
Sat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import React from 'react';
import { Calendar  } from 'widgetsy';

function App() {
  return (
    <div
    style={{width:"50%"}}
    >
      <Calendar  />
    </div>
  );
}

export default App;

In this example, a basic Calendar Widget is rendered without any customizations. The widget will display the current time using the default styles.

Customized Calendar Widget​

August

Sun
Mon
Tue
Wed
Thu
Fri
Sat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import React from 'react';
import { Calendar  } from 'widgetsy';

function App() {
  return (
    <div>
      <Calendar
        backgroundColor={[
          { color: '#003973', stop: 0 },
          { color: '#a6a679', stop: 100 },
        ]}
        rotation={45}
        primaryFont="#000000"
        primaryColor="#FFFFFF"
      />
    </div>
  );
}

In this example, the Calendar Widget is customized with a background gradient, rotation of 45 degrees, white primary font color, and black primary color for UI elements.

Calendar Widget with Theme​

August

Sun
Mon
Tue
Wed
Thu
Fri
Sat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import React from 'react';
import { Calendar  } from 'widgetsy';

function App() {
  return (
    <div>
      <Calendar
        theme={1}
        rotation={45}
        primaryFont="#000000"
        primaryColor="#FFFFFF"
      />
    </div>
  );
}

In this example, the Calendar Widget is customized with a background gradient, rotation of 45 degrees, white primary font color, and black primary color for UI elements.

Feel free to customize the Calendar Widget's props according to your specific requirements and UI design.